import React, { useState, useEffect } from "react";

import TabBarCom from '../../components/tabbar'
import Search from "../../components/common/search";
import { Grid } from "antd-mobile-v5"

import { InfiniteScroll, PullToRefresh } from 'antd-mobile-v5'


// 筛选条件组件
import Filter from "./components/Filter";

// 获取定位城市
import { getCurrentCity } from "../../utils/index";

import { TodoApi } from '../../api/model/todo'

import './index.scss'

// 获取房屋列表请求体
let houseQuery = {
  cityId: '',
  start: 1,
  end: 20,
}


export default function Toto()  {
  useEffect(() => {
    
    getCurrentCity().then(async (res: any) => {
      houseQuery.cityId = await res.value
    })
  })

  // 获取房源数据
  async function getHouseList() {
    return await TodoApi.getHouses(houseQuery).then((res: any) => {
      res.body.list.map((item: any) => {
        return item.houseImg = 'http://127.0.0.1:8080' + item.houseImg
      })
      houseQuery.start = houseQuery.end + 1
      houseQuery.end = houseQuery.end + 20
      return res.body.list
    })

  }

  const [data, setData] = useState<string[]>([])
  const [hasMore, setHasMore] = useState(true)
  // 上拉加载更多
  async function loadMore() {
    const append = await getHouseList()
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
    //console.log(data.length)
  }

  // 下拉刷新
  async function onRefresh() {
    houseQuery.start = 1
    houseQuery.end = 20
    const append = await getHouseList()
    setData(val => [...append])
    // console.log(data.length)
  }

  // 子组件向父组件的通讯 接收筛选参数
  const onFilter = (e: any) => {
    console.log(e)
    const filter = {price: e.price[0]}
    houseQuery = {...houseQuery, ...filter}
    onRefresh()
    //this.cityListComponent.current.onRefresh()
  }
  return (

    <div className="house">
      <TabBarCom title="">
        <div className="house_top">
          <Search></Search>
        </div>

        <Filter onFilter={onFilter}></Filter>

        <div className="house_list" >
          <PullToRefresh onRefresh={onRefresh} >
            {
              data.map((item: any, index) => {
                return <Grid key={index} columns={3} gap={8} className="border_w2_b house_list_Grid">
                  <Grid.Item>
                    <img className="bor_rd_4" src={item.houseImg} alt="" style={{ width: '100%', height: '70px' }} />
                  </Grid.Item>
                  <Grid.Item span={2}>
                    <div className='house_list_Grid_item'>
                      <p className='house_list_Grid_item_title'>{item.title}</p>
                      <p className='house_list_Grid_item_desc'>{item.desc}</p>
                      <p className='house_list_Grid_item_tags'>
                        {
                          item.tags.map((ele: string, y) => {
                            return <span key={y}>{ele}</span>
                          })
                        }
                      </p>
                      <p className='house_list_Grid_item_price'>
                        {item.price}<small style={{ fontSize: '12px' }}> 元/月</small>
                      </p>
                    </div>
                  </Grid.Item>
                </Grid>
              })
            }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
          </PullToRefresh>
        </div>

      </TabBarCom>
    </div>



  )
}

// export default class Toto extends React.Component {
//   state: any
//   cityListComponent: any
//   constructor(props: any) {
//     super(props)

//     this.state = {
//       houseQuery
//     }

//     this.cityListComponent = React.createRef()
//   }

//   async componentDidMount() {
//     houseQuery.start = 1
//     houseQuery.end = 20
//     await getCurrentCity().then(async (res: any) => {
//       houseQuery.cityId = await res.value
//     })

//   }



//   // 子组件向父组件的通讯 接收筛选参数
//   onFilter = (e: any) => {
//     console.log(this.cityListComponent.current.getHouseList())
//     //this.cityListComponent.current.onRefresh()
//   }

//   render() {
//     return (
//       <div className="house">
//         <TabBarCom title="">
//           <div className="house_top">
//             <Search></Search>
//           </div>

//           <Filter onFilter={this.onFilter}></Filter>

//           <Lsit ></Lsit>

//         </TabBarCom>
//       </div>
//     )
//   }

// }
